<template>
  <div>
    <v-sheet color="primary" tile dark>
      <v-container>
        <v-row justify="center" class="my-12 py-12">
          <v-col cols="12" class="text-center ">
            <h1 class="text-h2 font-weight-bold" style="line-height: 1.3;">
            感谢您的支持！
            </h1>

            <h3 class="my-6 text-h6 font-weight-regular">
              年费用户请联系作者，以便提前免费体验更高级的功能
            </h3>
          </v-col>

          <v-col cols="12">
            <v-row>
              <v-col cols="12" md="4" v-for="(item, i) in price" :key="i">
                <v-card light outlined class="pt-12 px-6 fill-height">
                  <v-card-text class="black--text">
                    <div>
                      <div class="d-flex align-center">
                        <span class="align-self-start text-h6">￥</span>
                        <h2
                          class="text-h2 font-weight-bold"
                          :class="item.color"
                        >
                          {{ item.price }}
                        </h2>
                        <span class="align-self-end">/月</span>
                      </div>

                      <h2 class="text-h5 mt-4 mb-1">
                        {{ item.title }}
                      </h2>
                      <h4 class="subtitle-1">
                        {{ item.desc }}
                      </h4>
                    </div>

                    <v-divider class="my-10" />

                    <div>
                      <div
                        class="d-flex align-center subtitle-1 my-1"
                        v-for="(d, k) in item.data"
                        :key="k"
                      >
                        <v-icon left :class="item.color">mdi-check</v-icon>
                        {{ d }}
                      </div>
                    </div>

                    <v-card-actions class="mt-12">
                      <v-btn
                        large
                        outlined
                        :class="item.color"
                        class="text-capitalize"
                      >
                        快去 {{ item.title }}
                        <v-icon right>mdi-arrow-right</v-icon>
                      </v-btn>
                    </v-card-actions>
                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>
          </v-col>

        
        </v-row>
      </v-container>
    </v-sheet>
  </div>
</template>

<script>
export default {
  data: () => ({
    price: [
      {
        title: "免费试用！",
        desc:
          "您有一次免费试用的机会",
        price: 0,
        color: "",
        data: [
          "使用一次",
          "参与统计",
          "查看实时统计结果",
          "查看实时计算结果",
         
        ],
      },
      {
        title: "月费会员",
        desc: "从您付费时刻开始为期一个月的会员",
        price: 50,
        color: "primary--text",
        data: [
          "Users 3",
          "All features on FREE plan",
          "Hide Shock ® label",
          "All apps",
          "Connect to custom domain",
          "3rd party service integrations",
          "Unlimited editable exports",
        ],
      },
      {
        title: "年费会员",
        desc: "The ideal plan for businesses and agencies.",
        price: 400,
        color: "secondary--text",
        data: [
          "Users 5",
          "All features on BASIC plan",
          "Content Management System",
          "Premium Analytics",
          "Version Control",
          "Single Sign-On (SSO)",
          "Co-conception program",
        ],
      },
    ],
  }),
};
</script>
